@import '~bulma/sass/utilities/initial-variables';

/*
OVERRIDES ------------------------------------------------------------------------------------------
Derived variable overrides
*/

/* Button ------------------ */

$button-focus-box-shadow-size: 0px;

/* Colors ------------------- */

// Brand colors
$primary: #464acb;

// Color semantics match GitLab Pajamas 500-level | Blue, Green, Orange, Red
// https://design.gitlab.com/foundations/colors/
$blue: #1f78d1;
$green: #1aaa55;
$orange: #fc9403;
$red: #db3b21;

// Other semantic vars (success, info, danger, etc) remain where $warning yellow is overridden
// to match above Gitlab Pajamas color semantics.
$error: $red;
$link: $primary; // Set to match $interactive-navigation which is assigned after these primary Bulma color settings
$warning: $orange;
$modal-background-background-color: rgba(#000000, 0.65);

/* Font-- ------------------ */

$family-sans-serif: 'IBM Plex Sans';
$family-monospace: 'IBM Plex Mono';

/* Modal -------------------- */

$modal-background-background-color: rgba($black, 0.3);

/* Navbar ------------------- */

$navbar-height: 3.25rem;
$navbar-breakpoint: $tablet;

/* Tabs --------------------- */

$tabs-link-active-border-bottom-color: $primary;
$tabs-link-active-color: $primary;
$tabs-toggle-link-active-background-color: $primary;
$tabs-toggle-link-active-border-color: $primary;

/*
ADDITIONS ------------------------------------------------------------------------------------------
General and semantically named variables for improved contextual use within the app
*/

/* Colors ------------------- */

// Adding grey-lightest to sit between grey-lighter and white-ter
// https://bulma.io/documentation/modifiers/color-helpers/#background-color
$grey-lightest: hsl(0, 0%, 93%);
$app-background-color: $grey-lightest;

// Useful for main and secondary navigation based interactive elements
$interactive-navigation: $primary;
$interactive-navigation-inactive: rgb(55, 55, 55);

// Useful for primary interactive buttons and components within the UI in focus (page, modal, etc)
// Ex. Save, New, Create, Install, etc.
$interactive-primary: $green;

// Useful for secondary and supporting $interactive-primary buttons and components
// Ex. Toggles, Checkboxes, Radios, Pickers, etc.
$interactive-secondary: $blue;
